@charset "utf-8";
article{
    width:100%;
    /* height:100%; */
    background-color:#fbf9f9;
}
article .main{
    width:1200px;
    margin:0 auto;
    height:100%;
}
article .banner{
    height:400px;
    position:relative;
}
article .bannerLeft{
    color:#fff;
    font-size:14px;
    line-height:34px;
    width:192px;
    height:380px;
    background-color:#585757;
    float:left;
}
article .bannerLeft li:hover{
    background-color:#fff;
    color:#000;
}
article .bannerLeft .navLi{
    padding-left:14px;
}
article .bannerLeft .nav-items{
    display: none;
    position: absolute;
    top: 0;
    left: 190px;
    width: 990px;
    min-height: 369px;
    padding: 10px 20px 0 0;
    background-color: #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    z-index:5;
    box-shadow: 2px 0px 7px rgba(0, 0, 0, 0.2);
}
.bannerLeft .nav-items .nav-left{
    width:480px;
    float:left;
}
.bannerLeft .nav-items .nav-right{
    width:480px;
    float:right;
}
.nav-items  h5{
    margin-left:16px;
    font-size: 14px;
    color:#000;
    font-weight:600;
    word-wrap: break-word;
    word-break: break-all;
    border-bottom: 2px dashed #ccc;
}
.nav-items li{
    display: inline-block;
    height: 16px;
    color:#000;
    margin-left:8px;
    padding: 0 9px 0 10px;
    margin-bottom: 7px;
    line-height: 16px;
    border-left: 1px solid #ddd;
}
.nav-items  li:first-child{
    border-left:none;
}
article .bannerRight{
    color:#fff;
    font-size:14px;
    line-height:30px;
    width:1008px;
    height:380px;
    background-color:#585757;
    float:right;
    overflow: hidden;
    position:relative; 
    min-height: 357px; 
}
.bannerRight .bannerUl{
    width:9999px;
    /* height:380px; */
}
.bannerRight li{
    float:left;
    width:1008px;
    height:380px;
}
.bannerRight img{
    width:100%;
    transition: all 1s;
}
.arrowWrap{
    opacity:0;
    transition:all .5s;
}
.bannerRight:hover .arrowWrap{
    opacity: 1;
}
.arrowWrap img{
    width:50px;
}
.prev,.next{
    position:absolute;
    top:50%;
    cursor:pointer;
    transform:translate(0,-50%);
}
.prev{
    left:20px;
}
.next{
    right:20px;
}
.content{
    background-color:#fbf9f9;
    margin-top:20px;
}
/* .content .ban{
    height:300px;
} */
.content .template{
    margin-top:20px;
    width:1200px;
    height:1200px;
}
.content .template li{
    float:left;
    width:240px;
    height:360px;
    background-color:#fff;
    box-sizing:border-box;
    margin-bottom:20px;
    border-right:1px solid #f1f0f1;
    border-bottom:1px solid #f1f0f1;
}
.content .template li img{
    width:192px;
    padding:24px;
    padding-bottom:10px;
}
.content .template li h2{
    color:#f32c2c;
    font-size:20px;
    margin-top:0px;
    margin-left:24px;
}
.content .divSpan{
    margin-left:24px;
    margin-top:4px;
}
.content .template li span{
    display:inline-block;
    width:40px;
    height:20px;
    line-height:20px;
    text-align:center;
    color:#fff;
    font-size:14px;
    border-radius:5px;
    background-color:#f33030;
    margin-right:10px;
}
.content .template li p{
    width:192px;
    margin-left:24px;
    font-size:14px;
    margin-top:10px;
    color:#000;
    line-height:22px;
}
.content .conUl{
    height:360px;
    background-color:#fff;
    margin-top:60px;
}
.content .conUl li{
    float:left;
    margin:20px;
}



